import React, {Component} from 'react';
import {
  Card,
  Modal,
  Table,
  Button,
  Breadcrumb,
} from 'antd';
import {ExclamationCircleOutlined} from '@ant-design/icons';
/*export default class UserInfo extends Component{
    constructor() {
        super();
    }
    render() {
        return <div>
            <h1>这里是用户组件。。。</h1>
        </div>
    }

 }*/

const {confirm} = Modal;

function UserlIist(props) {

  //删除用户
  let handleDelete = (record, index) => {
    console.log(record, 'record');
    confirm({
      title: '确定要删除此项么?',
      icon: <ExclamationCircleOutlined/>,
      content: 'Some descriptions',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  //编辑用户
  let handleEdit = (userId) => {
    props.history.push({
      pathname:'/admin/userInfoEdit/',
      state: {
        userId: 1,
      }
    });
  };
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record, index) => (
          <div>
            <Button
                type="primary"
                size="small"
                onClick={() => handleEdit(record.key)}
            >
              修改
            </Button>
            <Button style={{margin: '0 1rem'}} type="danger" size="small"
                    onClick={() => handleDelete(record.key)}
            >
              删除
            </Button>
          </div>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  return (
      <div>
        {/*面包屑*/}
        <Breadcrumb style={{margin: '16px 0'}}>
          <Breadcrumb.Item>主页</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          <Breadcrumb.Item>用户列表</Breadcrumb.Item>
        </Breadcrumb>
        <Card title="用户组件" extra={
          <Button
              type="primary"
              size="small"
              onClick={() => props.history.push('/admin/userInfoAdd')}
          >
            新增
          </Button>
        }
        >
          {/*表格数据*/}
          <Table columns={columns} dataSource={data}/>
        </Card>

      </div>
  );

}

export default UserlIist;
